<template>
<div>
    <h1>VUE Router</h1>
    <!-- <p>作用：在页面直接传递数据 用法如下 { $route.query.name }</p>
    <p>{{$route.query.name}}</p> 
    <p>注意:route是获取  router是跳转</p> -->
    <p>路由传参：是为了解决页面之间的参数不便于传递的问题</p>
    <p>以？为分隔，前面的叫params ，后面的叫query</p>
    <p>？前面的参数：{{$route.params.usname}}</p>
    <p>?后面的参数：{{$route.query.num}}</p>
    <h1>动态路由:大量重复页面，结构相似，数据不同</h1>
    <p>典型代表：前面那一页是列表页，当前这一页是详情页</p>
    <p>动态路由的特点：修改url时，渲染的是同一个组件，为了提高效率，会复用原来的组件，因此钩子函数不会被重新执行。需要用 watch或者beforeRouteUpadte方法。 注意next()</p>
    <!-- 跳转页面  tag修改标签  replace 是替换地址 没有记录，平常是push-->
    <!-- :to="{path:url,params:{userId:123}}    ===  :to="url +/123"  params是/后面的值-->
    <router-link :to="url" tag="div" replace>int UI</router-link>
    <p @click="navToError">点击跳转到error</p>
</div>
</template>

<script>
export default {
    data(){
        return{
        // url：'./mint-ui/:userId'
          url:'./mint-ui?name=yjf$age=12'
        }
    },
    // 为了监听动态路由变化，通过watch监听路由
    // watch:{
    //       '$route'(to,from){
    //              console.log(`我将会获取${this.$route.params.usname}对应的数据  `)
    //         }
    // },
    // 为了监听动态路由变化，通过beforeRouteUpadte路由的钩子函数监听变化
    beforeRouteUpadte(to,from,next){
        console.log(to,from,next)
        next()
    },
    created(){
        console.log(this.$route.params.usname)
        console.log(`我将会获取${this.$route.params.usname}对应的数据  `)
    },
    methods:{
        navToError(){
            // 。。。逻辑
            this.$router.push('./error?name=000')
        }
    }
}
</script>

<style scoped>
    
</style>